<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
	    <script src="minicolors/jquery.minicolors.js"></script>
	    <link rel="stylesheet" href="minicolors/jquery.minicolors.css">
	</head>
	<body>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#settings">设置</button>
			<button type="button" class="btn btn-default" onclick="alert('嘿，我听说您喜欢模态框...');">随机</button>
		</div>
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">设置项目</h4>
		            </div>
		            <div class="modal-body">
						<div class="form-group">
							<label>魔方各面上的颜色</label>
							<input type="hidden" id="" class="colors" value="#db913d">
							<input type="hidden" id="" class="colors" value="#db913d">
							<input type="hidden" id="" class="colors" value="#db913d">
							<input type="hidden" id="" class="colors" value="#db913d">
							<input type="hidden" id="" class="colors" value="#db913d">
							<input type="hidden" id="" class="colors" value="#db913d">
							<p class="help-block"></p>
						</div>
						<div class="form-group">
							<label for="clearColor">魔方内部的颜色</label>
							<input type="text" class="form-control" id="clearColor" placeholder="">
							<p class="help-block"></p>
						</div>
						<div class="form-group">
							<label for="needStep">随机转动魔方时的每次需要多少帧</label>
							<input type="number" class="form-control" id="needStep" placeholder="">
							<p class="help-block"></p>
						</div>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary">确认</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<script type="text/javascript">
			$('#clearColor').minicolors({
                control: 'wheel',
                defaultValue: '#abcdef',
                format: 'hex',
                keywords: '',
                inline: false,
                letterCase: 'lowercase',
//              opacity: 1,
                position: 'bottom left',
                swatches: ["#ef9a9a","#90caf9","#a5d6a7","#fff59d","#ffcc80","#bcaaa4","#eeeeee","#f44336","#2196f3","#4caf50","#ffeb3b","#ff9800","#795548","#9e9e9e"],
                change: function(value, opacity) {
                    if( !value ) return;
                    if( opacity ) value += ', ' + opacity;
                    if( typeof console === 'object' ) {
                        console.log(value);
                    }
                },
                theme: 'default'
            });
            $('.colors').minicolors({
                control: 'wheel',
                defaultValue: '#abcdef',
                format: 'hex',
                keywords: '',
                inline: false,
                letterCase: 'lowercase',
//              opacity: 1,
                position: 'bottom left',
                swatches: ["#ef9a9a","#90caf9","#a5d6a7","#fff59d","#ffcc80","#bcaaa4","#eeeeee","#f44336","#2196f3","#4caf50","#ffeb3b","#ff9800","#795548","#9e9e9e"],
                change: function(value, opacity) {
                    if( !value ) return;
                    if( opacity ) value += ', ' + opacity;
                    if( typeof console === 'object' ) {
                        console.log(value);
                    }
                },
                theme: 'default'
            });
		</script>
	</body>
</html>
